define("admin/page/dashboard/chart", [
    "jquery",
    "vue",
    "chart"
], function($, Vue){
    var vm = new Vue({
        el : '#dashboard',
        delimiters: ['${', '}'],

        data: {
            pageData: {},
        },
        
        methods: {

        },

        mounted: function(){
            Vue.set(this, 'pageData', PAGE.meta);
            var barOptions = {
                responsive: true,
                "scales": {
                    "yAxes": [{
                        "ticks": {
                            "beginAtZero": true
                        }
                    }],
                    'xAxes': [{
                        'display': true
                    }]
                },
                legend: {
                    display: false
                }
            };
            var lineOptions = {
                responsive: true,
                "scales": {
                    "yAxes": [{
                        "ticks": {
                            "beginAtZero": true
                        }
                    }]
                },
                legend: {
                    display: false
                }
            };
            var pieOptions = {
                responsive: true,
            };

            var ctx0 = document.getElementById('totalChart').getContext('2d');
            var ctx1 = document.getElementById('cdnChart').getContext('2d');
            var ctx2 = document.getElementById('areaChart').getContext('2d');
            //var ctx3 = document.getElementById('statusChart').getContext('2d');
            new Chart(ctx0, {type: 'bar', data: this.pageData.total, options:barOptions});
            new Chart(ctx1, {type: 'line', data: this.pageData.cdn, options:lineOptions});
            new Chart(ctx2, {type: 'polarArea', data: this.pageData.area, options:pieOptions});
            //new Chart(ctx3, {type: 'doughnut', data: this.pageData.status, options:pieOptions});
        },
    });
});